<template>
  <div class="container">
    <Title :title="title" :subtitle="subtitle"/>
    <!-- <div>{{title}}</div> -->
    <div>
      <input style="background:#f2f2f2" @keyup.enter="handleClick" type="text" v-model="mytodo" />
      <button @click="handleClick">添加</button>
      <button @click="clear">清空</button>
    </div>
    <ul>
      <li
        :class="{'done':todo.done}"
        v-for="(todo,index) in todos"
        v-bind:key="index"
        @click="toggle(index)"
      >{{index+1}}-{{todo.text}}
      
      <!-- <switch :checked="todo.done" @change="toggle(index)"></switch> -->
      </li>
    </ul>
    <div>
      <p>统计：{{remain}}/{{todos.length}}</p>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
export default {
  components: {
    Title
  },
  data () {
    return {
      title: '慕课 demo',
      subtitle: '二级标题',
      mytodo: '',
      todos: [
        {
          text: '语文',
          done: false
        },
        {
          text: '英语',
          done: false
        },
        {
          text: '数学',
          done: false
        }
      ]
    }
  },
  computed: {
    remain () {
      return this.todos.filter(v => !v.done).length
    }
  },
  methods: {
    handleClick () {
      this.todos.push({
        text: this.mytodo,
        done: false
      })
      this.mytodo = ''
    },
    toggle (i) {
      console.log(this.todos)
      this.todos[i].done = !this.todos[i].done
    },
    clear () {
      this.todos = this.todos.filter(v => !v.done)
    }
  }
}
</script>

<style>
.container {
  width: 30%;
  margin: 0 auto;
}

.done {
  text-decoration: line-through;
}
</style>